<template>
  <view class="container container-white">
    <scroll-view
      class="article-body"
      :scroll-y="true"
    >
      <view class="article van-hairline--bottom">
        <van-skeleton
          title
          title-width="100%"
          :row="2"
          :loading="!loaded"
          class="skeleton-article-header"
        >
          <van-cell
            :title="article.title"
            size="large"
            :border="false"
            class="article-title__cell"
          />
        </van-skeleton>
        <!-- 内容详情 -->
        <van-skeleton
          :title="false"
          :row="20"
          :loading="!loaded"
          row-width
          class="skeleton-article-body"
        >
          <div class="richcontent">
            <wxParse
              v-if="formatRich"
              :content="formatRich"
              @preview="preview"
              @navigate="navigate"
            />
          </div>
        </van-skeleton>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import wxParse from 'mpvue-wxparse'
import { getNoticeApi } from '@/api'
export default {
  components: {
    wxParse
  },
  data () {
    return {
      loaded: false,
      article: {
        title: '',
        data: null
      }
    }
  },
  onLoad () {
    this.onLoadView()
  },
  computed: {
    formatRich () {
      if (this.article && this.article.data) {
        return this.article.data.body
      } else {
        return ''
      }
    }
  },
  methods: {
    onLoadView () {
      getNoticeApi().then((res) => {
        this.article = res
        this.loaded = true
      })
    }
  }
}
</script>

<style>
@import url("~mpvue-wxparse/src/wxParse.css");
</style>

<style lang="less">
.container {
  .van-cell {
    &-group {
      margin-bottom: 10px;
      background: #fff;
      &__title {
        padding: 20px 15px 10px !important;
      }
    }
  }
  .textarea-cell {
    .van-cell {
      flex-direction: column;
      &__value {
        margin-top: 10px;
      }
    }
    &__input {
      white-space: nowrap;
    }
  }
}

.workload-cell {
  .van-cell {
    &__title {
      flex: none;
    }
    &__value {
      font-family: UICTFontTextStyleBody;
      font-size: 12px;
      color: #c8c9cc;
    }
  }
  &-tips,
  &-error {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    text {
      line-height: 1;
      margin: 0 3px;
    }
  }
  &-error {
    color: red;
  }
}

.images-upload {
  padding: 10px 15px;
}

.form-action {
  padding: 30px 15px 0;
}

.richcontent {
  padding: 10px;
  font-size: 16px;
  .p {
    margin-bottom: 10px;
    color: #333;
  }
}
</style>
